<template>
	<view>
		<view class="group">
			<view v-for="item in photo" :key="index">
				<view class="date">{{item[0]}}</view>
				<view class="photo">
					<image class="img" v-for="(i,j) in item" :key="ij" :src="i.path" v-if="j>=1" @click="preview(i.img)" />
				</view>
			</view>
		</view>
		<view class="uni-fab-box">
			<view @click="chooseImage">
				<uni-fab ref="fab" :pattern="pattern" :horizontal="horizontal" :vertical="vertical" />
			</view>
		</view>
	</view>
</template>

<script>
	import uniFab from '../../components/uni-fab/uni-fab.vue';
	export default {
		data() {
			return {
				horizontal: 'right',
				vertical: 'bottom',
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#007AFF'
				},
				associationId: '', //校友会id
				imgArr: [], //图片数组
				ImgNumber: 9, //单次可选图片个数
				urls: '', //存储图片地址
				photo: [], //存储查询的所有信息
			}
		},
		onLoad(option) {
			this.associationId = option.id;
			var that = this;
			uni.request({
				url: getApp().globalData.URL + "associationUserInfo/queryPhotoByAssId",
				data: {
					id: that.associationId
				},
				header: {
					'content-type': 'application/json;charset=UTF-8' // 默认值
				},
				method: 'GET',
				success: (res) => {
					console.log(res.data);
					that.photo = that.photoDetail(res.data);
					console.log(that.photo);
				}
			})
		},
		methods: {
			preview(img) {
				uni.previewImage({
					urls: img
				})
			},
			//解析返回的数据集
			photoDetail(arr) {
				var json = {};
				for (var i = 0; i < arr.length; i++) {
					if (json[arr[i].time] == null) {
						json[arr[i].time] = [arr[i].time];						
					}
					json[arr[i].time].push({
						path: getApp().globalData.Link + "upload/图片/" + arr[i].path
					})
				}
				return json;
			},
			/** 选择图片 */
			chooseImage() {
				var that = this;
				var upload_picture_list = this.imgArr
				// console.log(this.imgArr.length)
				if (this.imgArr.length == 9) {
					uni.showToast({
						title: "最多上传九张图片",
						icon: 'none',
						duration: 2000
					})
					return;
				}
				uni.chooseImage({
					count: this.ImgNumber - this.imgArr.length, //最多选择4张图片
					sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: function(res) {
						var tempFiles = res.tempFiles
						for (var i in tempFiles) {
							tempFiles[i]['upload_percent'] = 0
							tempFiles[i]['path_server'] = ''
							that.imgArr.push(tempFiles[i])
						}
						if (res.tempFilePaths.count == 0) {
							return;
						}
						//上传图片
						//console.log("upload_picture_list:",upload_picture_list)
						that.imgArr = upload_picture_list;
						that.chooseViewShow1(); //判断是否隐藏添加
						that.uploadFile(upload_picture_list); //开始上传
						that.imgArr = [];
					}
				})
			},
			//循环上传图片
			uploadFile(imgArr) {
				//循环把图片上传到服务器  
				for (var j in imgArr) {
					if (imgArr[j]['upload_percent'] == 0) {
						this.upload_file_server(imgArr, j)
					}
				}
			},
			/** 是否隐藏图片选择 */
			chooseViewShow1() {
				if (this.imgArr.length >= this.ImgNumber) {
					this.chooseViewShow = false
				} else {
					this.chooseViewShow = true
				}
			},
			upload_file_server(upload_picture_list, j) {
				//图片上传
				let that = this
				uni.uploadFile({
					url: getApp().globalData.URL + "api/imgUpload/upload",
					filePath: upload_picture_list[j]['path'], //上传的文件本地地址 
					name: 'multipartFile',
					success: function(res) {
						let datas = JSON.parse(res.data);
						if (datas.errno == 0) {
							console.log(datas.data[0]);
							var obj = new Date();
							that.urls = datas.data[0];
							uni.request({
								url: getApp().globalData.URL + "api/associationUserInfo/photo?photo_url=" + that.urls + "&id=" + that.associationId +
									"&create_time=" + that.formatDate(obj),
								header: {
									'content-type': 'application/json;charset=UTF-8' // 默认值
								},
								method: 'POST'
							})
						}
					},
				})
			},
			//日期转换方法
			formatDate(value) {
				let date = new Date(value);
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM;
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d;
				// let h = date.getHours();
				// h = h < 10 ? ('0' + h) : h;
				// let m = date.getMinutes();
				// m = m < 10 ? ('0'+ m) : m;
				// let s = date.getSeconds();
				// s = s < 10 ? ('0' + s) : s;
				// return y + '/' + MM + '/' + d+' '+h+':'+m+':'+s ;
				return y + '/' + MM + '/' + d;
			},
		},
		components: {
			uniFab
		}
	}
</script>

<style>
	.group {
		font-size: 30rpx;
		margin-top: 20rpx;
	}

	.date {
		margin-left: 28rpx;
	}

	.photo {
		margin-left: 20rpx;
	}

	.img {
		width: 200rpx;
		height: 200rpx;
		padding-left: 5px;
		padding-top: 10rpx;
	}

	.uni-fab-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}
</style>
